<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>公告配置</title>
	<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../static/css/skins.css">
	<script type="text/javascript" src="../../lib/vue/vue.js"></script>
	<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/webApi.js"></script>
	<script type="text/javascript" src="../../static/js/tool.js"></script>
	<style type="text/css">
		/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
		html,
		body,
		#app,
		.el-container {
			/*设置内部填充为0，几个布局元素之间没有间距*/
			padding: 0px;
			/*外部间距也是如此设置*/
			margin: 0px;
			/*统一设置高度为100%*/
			height: 100%;
		}

		.el-main {
			padding: 0px;
			height: 100%;
			border: 1px solid #CCCCCC;
		}
	</style>
</head>

<body class="skin-blue">
	<el-container id="app">
		<el-main>
			<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right" size="mini"
				style="height: 35px;border: 1px solid #e8eaec;">
				<el-form-item label="部门">
					<el-cascader v-model="queryData.departId" :options="orgOptions"
						:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:false,emitPath:false }" clearable
						filterable style="width:100%">
					</el-cascader>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="searchEvent(1)">查询
					</el-button>
					<el-button type="primary" icon="el-icon-refresh-right" @click="searchEvent(0)">重置
					</el-button>
				</el-form-item>
			</el-form>
			<!-- <vxe-grid border stripe ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source
				:height="tableHeight" size="mini" :radio-config="tableRadio" :pager-config="tablePage" :data="tableData"
				:loading="dataLoading" :toolbar="tableToolbar" :edit-config="{trigger:'click', mode:'row'}"
				@cell-dblclick="cellDBLClickEvent" @toolbar-button-click="toolbarButtonClickEvent">
				<vxe-table-column type="checkbox" width="60" headerAlign="center" align="center"></vxe-table-column>
				<vxe-table-column field="id" title="公告ID" width="180" headerAlign="center" align="center">
				</vxe-table-column>
				<vxe-table-column field="title" title="标题" width="240" headerAlign="center" align="left">
				</vxe-table-column>
				<vxe-table-column field="type" title="类型" width="100" headerAlign="center" align="center">
					<template v-slot="{ row }">
						{{formatterMenuType(row.type)}}
					</template>
				</vxe-table-column>
				<vxe-table-column field="content" title="内容" headerAlign="center" align="center">
				</vxe-table-column>
				<vxe-table-column field="endDate" title="到期时间" width="80" headerAlign="center" align="center">
				</vxe-table-column>
				<vxe-table-column field="stateName" title="状态" width="240" headerAlign="center" align="left">
				</vxe-table-column>
				<vxe-table-column field="createUser" title="创建人" headerAlign="center" align="center">
				</vxe-table-column>
				<vxe-table-column field="createTime" title="创建日期" headerAlign="center" align="center" :formatter="formatDate">
				</vxe-table-column>
				<vxe-table-column field="state" title="状态" width="180" headerAlign="center" align="center" :visible="visible">
				</vxe-table-column>
			</vxe-grid> -->
		</el-main>

		<!-- <vxe-modal ref="xModal" v-model="showEdit" :title="selectRow" width="800" :loading="submitLoading" resize destroy-on-close></vxe-modal> -->

	</el-container>
</body>
<script type="text/javascript">
	window.onload = function () {
		var main = {
			data() {
				return {
					orgOptions: [],
					muentext: '',
					menuShow: false,
					menuOptions: [],
					disabled: false,
					selectRow: '',
					submitLoading: false,
					showEdit: false,
					form: {
						id: '',
						title: '',
						type: '',
						content: '',
						endDate: '',
						menuId: ''
					},
					formRules: {
						title: [{
							required: true,
							message: '请输入公告标题'
						}],
						type: [{
							required: true,
							message: '请选择公告类型'
						}],
						content: [{
							required: true,
							message: '请输入公告内容'
						}],
						endDate: [{
							required: true,
							message: '请选择截至日期'
						}]
					},
					menuTypeOptions: [{
						value: "1",
						label: '纯公告'
					}, {
						value: "2",
						label: '链接菜单'
					}],
					visible: false,
					ntcTitle: '',
					dataLoading: false,
					tableHeight: '100%',
					tableRadio: {
						trigger: 'row'
					},
					tableData: [],
					tablePage: {
						perfect: true,
						total: 0,
						currentPage: 1,
						pageSize: 15,
						align: 'left',
						pageSizes: [15, 30, 45, 60, 75, 90],
						layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
							'Total'
						],
					},
					queryData: {
						ntcName: ""
					},
					tableToolbar: {
						id: 'toolbar',
						size: 'mini',
						perfect: true,
						buttons: [{
							code: 'btnAdd',
							name: '新增公告',
							status: 'perfect',
							icon: 'el-icon-plus vxe-primary-color'
						}]
					},
					userId: ''
				}
			},
			created() {
				this.getBtn();
				this.getList();
			},
			mounted() {
				//this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 1;
			},
			methods: {
				getOrgOptions() {
					let that = this;
					webApi('/org/getOrgOptions', 'post', {}, function (data) {
						if (data.code == 200) {
							that.orgOptions = data.data;
						} else {
							that.$XModal.message({
								message: data.msg,
								status: 'error'
							});
						}
					}, function () {})
				},
				getUser(){
					let that = this;
					webApi('/users/getUser', 'post', {V_TOKEN: ''}, function (data) {
						that.userId = data.data.depart_ID;
						console.log(that.userId);
						that.getList();
					}, function (msg) {})
				},
				getList() {
					let that = this;
					webApiMsapi('/ZhanZhiAllView/ZiYuanZhanZhiList', 'post', {
						currentPage: 1,
						pageSize: 15,
						ZHANZHI: '',
						DEPART_ID: ''
					}, function (data) {
						console.log(data)
					}, function (msg) {})
				},
				getBtn() {
					this.tableToolbar.buttons = Tool.getButton()
				},
				formatDate({
					cellValue
				}) {
					return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
				},
				searchEvent(acType) {
					if (acType == 0) {
						this.queryData = {
							keyword: ""
						}
						this.$refs[keyword].resetFields();
					} else {
						var object = this;
						webApi('/notice/NoticeList', 'post', {
							keyword: object.queryData.keyword,
							page: object.tablePage.currentPage,
							rows: object.tablePage.pageSize
						}, function (data) {
							object.tableData = data.data.rows;
							object.tablePage.total = data.data.total
							object.dataLoading = false;
						}, function (msg) {})
					}
				},
				formatterMenuType(cellValue) {
					let i = this.menuTypeOptions.findIndex((item) => item.value == cellValue)
					return this.menuTypeOptions[i].label ? this.menuTypeOptions[i].label : '';
				},
				checkColumnMethod({
					column
				}) {
					if (['ntcName'].includes(column.property)) {
						return false
					}
					return true
				},
				closeEvent() {
					this.showEdit = false;
				},
				cellDBLClickEvent({
					row
				}) {
					this.editEvent(row);
				},
			},
		};
		var vue = Vue.extend(main);
		new vue().$mount('#app');
	}
</script>

</html>